<!-- 单一菜单, 主要应用在左侧菜单不使用多级菜单, 而是简单的以及菜单 -->

<template>
  <div class="my-simple-menu" v-bind="$attrs">
    <template v-for="item in state.menuItems">
      <div 
        class="my-menu-item" 
        :class="[
          state.activeKey === `${item.key}` ? 'my-menu-item-active' : '', 
          state.selectedKey === `${item.key}` ? 'my-menu-item-selected' : '', 
        ]"
        @click="handleClickMenuItem(item)"
        @mouseenter="mouseenterMenuItem(item)" 
        @mouseleave="mouseleaveMenuItem(item)"
      >
        <div class="my-menu-icon" v-if="item.icon">
          <Icon :icon="item.icon" :size="iconSize"/>
        </div>
        <div class="my-menu-title" v-if="item.title">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, PropType } from 'vue'
import { Icon } from '/@/components/Icon';
import { isNumber} from 'lodash'
import { SingleMenuItem } from './types'
import { useAttrs } from '/@/hooks/core/useAttrs';
const emit = defineEmits(['select', 'update:selectedKey']);

const props = defineProps({
  width: { type: String, required: false },
  selectedKey: { type: [String], required: false },
  iconSize: { type: [Number], required: false, default: 16 },
  items: { type: Object as PropType<SingleMenuItem[]>, default: []}
})
const state = ref<any>({
  activeKey: '',
  selectedKey: null,
  menuItems: [] as SingleMenuItem[]
})
onMounted(() => {
  const { selectedKey, items } = props
  state.value.menuItems = items
  const selectedNode = items.length > 0 ? (selectedKey ? items.findLast(e => e.key === selectedKey) : items[0]) : null
  handleClickMenuItem(selectedNode)
})

const mouseenterMenuItem = (node : any) => {
  if(state.value.selectedKey === node.key) {
    return
  }
  state.value.activeKey = node.key
}

const mouseleaveMenuItem = (node : any) => {
  state.value.activeKey = ''
}

const handleClickMenuItem = (node : any) => {
  state.value.selectedKey = node?.key
  // 抛出事件
  if (node?.key) {
    emit('select', node)
    emit('update:selectedKey', state.value.selectedKey)
  }
}
</script>

<style lang="less">
.my-simple-menu {
  border-right: 1px solid #ebeef5;
  padding: 8px 3px 8px 3px;
}
.my-simple-menu, .my-menu-item {
  display: flex;
  flex-direction: column;
  // justify-content: center;
  text-align: center;
  align-items: center;
  color: @text-color-base;
  margin-bottom: 5px;
  // font-size: 14px;
  div {
    width: 100%;
    align-items: center;
  }
  .my-menu-title > span {
    line-height: 1.2; 
  }
}
.my-menu-item {
  margin-top: 3px;
  cursor: pointer;
  padding: 2px;

  div {
    margin-bottom: 1px;
  }
}

.my-menu-item-active {
  &:hover {
    border-radius: 10%;
    background-color: @menu-active-bg;
    color: @menu-active-color;
    transform: scaleY(1);
    opacity: 1;
    // transform: translateX(-50%);
		transition: all 0.5s; 
  }

  &:after {
    transform: scaleY(1);
    opacity: 1;
    transition: all 0.5s; 
  }
}

.my-menu-item-selected {
  color: @menu-selected-color;
  background-color: @menu-selected-bg;
  border-radius: 10%;

  &:hover { 
    transform: scaleY(1);
    opacity: 1;
		transition: all 0.5s; 
  }

  &:after {
    transform: scaleY(1);
    opacity: 1;
    transition: all 0.5s; 
  }
}


</style>
